
import UsersApi from "../../api/users.js";

import Base from "../base.js";

export default class extends Base {
  //  渲染函数
  render() {
    this.$el.html(`
    
    <section class="w3l-login">
		<div class="overlay">
			<div class="wrapper">
				<div class="logo">

				</div>
				<div class="form-section">
					<h3><img src="../../../static/html/images/123.png" alt=""></h3>
					<div class="p-font "><p>账号登录 </p><p class="signup"><a href="">手机动态码登录</a></p></div>
						<div class="form-input">
							<input type="text" name="usersname" placeholder="请输入账号" required="" >
						</div>
						<div class="form-input">
							<input type="password" name="password" placeholder="密码" required="">
						</div>
           <p class="remember signup"><a href="#reload" class="signuplink">忘记密码?</a></p>
      
            <button type="submit" class="btn btn-primary theme-button mt-4" id="login-btn">登录</button>
						<div class="new-signup">
							
						</div>
			
					<p class=" remember signup">还没有账号? <a href="#usersReg" >免费注册</a>	</p>
          <p class=" remember signup"><a href="#login" class="signuplink">管理员后台登录</a>	</p>
          <label class="check-remaind">
          <input type="checkbox">
          <span class="checkmark"></span>我已阅读并同意<a href="">《美团用户协议》</a>
          <a href="">《隐私政策》</a>，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理 
          </label>
				</div>
			</div>
		</div>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
	</section>

   `);

    this.$usersnameEle = $("input[name=usersname]");
    this.$passwordEle = $("input[name=password]");
    this.$loginBtn = $("#login-btn");
    this.$regBtn = $("span[class=reg-btn]");

  }
  async loginHandle() {
    const usersname = this.$usersnameEle.val();
    const password = this.$passwordEle.val();
    // 获取服务端返回值 status 判断登录是否成功
    const { status, token } = await UsersApi.login({ usersname, password });
    if (status) {
      // 存储令牌
      UsersApi.setToken(token);
      layer.msg("登录成功");
      location.hash = "#/info/index";
    } else {
      layer.msg("登录失败！请检查您的用户名和密码是否正确！")
    }
  };



  // 交互能力
  handle() {
    this.$loginBtn.on("click", this.loginHandle.bind(this));

  }
}


